<template>
    <section class="downMsg">
        <loading v-if="msgShow" loadingStyle="height: 400px"></loading>
        <div v-else>
            <div class="downMsgBox clearfix">
                <div class="downMsgImg">
                    <!-- <img src="../img/downImg.png" alt=""> -->
                    <img :src="itemInfo.logo" alt="">
                </div>
                <div class="downMsgText">
                    <header>{{itemInfo.title}}</header>
                    <p>
                        <label>发布时间：</label>
                        <span>{{itemInfo.time}}</span>
                    </p>
                    <p>
                        <label>软件大小：</label>
                        <span>{{itemInfo.size}}</span>
                    </p>
                    <p>
                        <label>运行环境：</label>
                        <span>{{itemInfo.supportsystem}}</span>
                    </p>
                    <p>
                        <label>软件官网：</label>
                        <span>{{itemInfo.url}}</span>
                    </p>
                    <p class="nowDown">
                        <button @click="downPlay"><i></i>立即下载</button>
                    </p>
                </div>
            </div>
            <div class="msgContent" v-html="itemInfo.content">
            </div>
        </div>
        
    </section>
</template>
<script>
import loading from '../../loading'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:"msg",
    props:["itemInfo","msgShow"],
    data(){
        return{
            descriptionContent:"",//描述
            keyWordsContent:"",//关键词
        }
    },
    methods:{
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose"]
        ),
        downPlay(){
            if(!this.user.userInfo){
                this.loginShow();
            }else{
                window.open(this.itemInfo.downurl)
            }
        }
    },
    components:{
        loading,
        
    },
    mounted () {
        this.descriptionContent = $(".msgContent").text().substring(0,150)
    },
    created () {
        var date = new Date();
        var years = date.getFullYear();
        this.keyWordsContent = this.itemInfo.title+"最新版_"+years+this.itemInfo.title+"官方版免费下载_"+this.itemInfo.title+"安装方法"
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    metaInfo () {
      return {
        title: this.itemInfo.title+'官方正版免费下载',
        meta: [
            {                 // set meta
                name: 'keyWords',
                content: this.keyWordsContent
            },
            {                 // set meta
                name: 'description',
                content: this.descriptionContent
            }
        ]
      }
    },
}
</script>

<style>
    .downMsg{
        background: #fff;
        min-height: 665px;
        padding: 16px;
    }
    .downMsgBox{
        padding-top: 26px; 
        padding-bottom: 24px;
        border-bottom:1px solid #ddd;
    }
    .downMsgBox>div{
        float: left;
    }
    .downMsgImg{
        width: 265px;
        height: 199px;
        margin-right: 32px;
    }
    .downMsgImg img{
        width: 100%;
    }
    .downMsgText header{
        font-size: 18px;
        line-height: 30px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
    }
    .downMsgText label{
        width: 70px!important;
        font-size: 14px;
        line-height: 26px;
        color: #686868;
        font-weight: 100!important;
        margin: 0!important;
        float: none;
    }
    .downMsgText span{
        display:inline-block;
        font-size: 14px;
        line-height: 26px;
        color: #686868;
    }
    .nowDown{
        margin-top: 14px;
    }
    .nowDown button{
        outline: none;
        padding: 0;
        border: 0;
        background: #ff5f5c;
        width: 193px;
        /* height: 34px; */
        font-size: 16px;
        line-height: 34px;
        text-align: center;
        color: #fff;
        border-radius: 17px;
    }
    .nowDown i{
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 4px;
        margin-top: -3px;
        vertical-align: middle;
        background: url(../img/downloadNum.png) no-repeat center;
    }
    .msgContent{
        padding-top: 10px;
    }
</style>